<template>
    <div class="mall-banner-swiper">
        <swiper :options="swiperOption" ref="mySwiper" id="mallSwiperBox">
            <!-- slides -->
            <swiper-slide>
                <div class="box">
                    <div class="inner-banner" style="background-image: url('http://www.jq22.com/demo/jqbanner/imgs/p1.jpg')"> </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="box">
                    <div class="inner-banner" style="background-image: url('http://www.jq22.com/demo/jqbanner/imgs/p1.jpg')"> </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="box">
                    <div class="inner-banner" style="background-image: url('http://www.jq22.com/demo/jqbanner/imgs/p1.jpg')"> </div>
                </div>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="open-bg"></div>
        </swiper>
    </div>
</template>


<script>
let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
export default {
    name: 'carrousel',
    data() {
        return {
            swiperOption: {
                slidesPerView: 1,
                centeredSlides: true,
                slidesOffsetBefore: 0.09 * w,
                slidesOffsetAfter: 0.09 * w,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true
                },
                width: 0.82 * w,
                loopAdditionalSlides: 1,
                onTransitionStart(swiper) {
                    console.log('Start', swiper);
                },
                autoHeight: false,
                pagination: {
                    el: '.swiper-pagination',
                    paginationClickable: true
                },
                allowTouchMove: true,
                on: {
                    resize: function() {
                        w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                        this.params.slidesOffsetBefore = 0.09 * w;
                        this.params.slidesOffsetAfter = 0.09 * w;
                        this.params.width = 0.82 * w;
                        this.update();
                    }
                }
            }
        };
    },
    // you can find current swiper instance object like this, while the notNextTick property value must be true
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper;
        }
    },
    mounted() {
        let that = this;
        this.swiper.autoplay.start();
    }
};
</script>
<style scoped>
.mall-banner-swiper,
#mallSwiperBox {
    width: 100%;
    height: 3.55rem;
}
.swiper-container {
    overflow: inherit;
}
.swiper-slide {
    width: 100%;
    height: 100%;
    color: #fff;
}
.swiper-slide .box {
    border-radius: 0.1rem;
    background: #fff;
    height: 100%;
    width: 94%;
    margin: 0 auto;
}
.inner-banner {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
/* .shade-bg {
    height: ;
} */
</style>

